<template>
	<view>
		<u-modal :show-confirm-button='false' title='确认订单' v-model="show" :content="content">
			<view class="slot-content modal-box">
				<u-form :error-type="errorType" :model="form" ref="uForm" label-position='top'>
					<u-form-item label="姓名" prop="name">
						<u-input v-model="form.name" />
					</u-form-item>
					<u-form-item label="电话" prop="phone">
						<u-input v-model="form.phone" />
					</u-form-item>
				</u-form>
				<bs-line></bs-line>
				<view class="annotation content-text mb-20 mt-30">
					*注：小程序仅支持个人报名，如需集体报名，请使用电脑访问官方网站进行报名。
				</view>
				<view class="content-text mb-50">
					官网地址：www.cbda1984.com
				</view>
				<view class="sign-pic mb-20">
					报名费：<text style="color: #FF0000;">¥{{details.price}}</text>
				</view>
				<u-button type='jz' :ripple="true" @click="handSignEnter">确认支付</u-button>
				<view class="look-title" @click="handNavLook">
					再看看
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		subPay
	} from '@/utils/tools.js'
	import qs from "@/utils/qs.js"
	export default {
		data() {
			return {
				show: false,
				form: {
					name: '',
					phone: '',
				},
				errorType: ['border-bottom', 'toast', 'message'],
				rules: {
					name: [{
							required: true,
							message: '请输入您的姓名',
							trigger: ['change', 'blur'],
						},
						{
							pattern: /^[a-zA-Z\u4e00-\u9fa5]+$/,
							transform(value) {
								return String(value);
							},
							message: '姓名不能输入数字和特殊符号'
						},
					],
					phone: [{
						validator: (rule, value, callback) => {
							var reg = /^(?:(?:\+|00)86)?1\d{10}$/
							if (!value) {
								callback(new Error('请输入手机号'));
							} else if (reg.test(value)) {
								callback()
							} else {
								callback(new Error('手机号格式不正确'));
							}
						},
						trigger: ['change', 'blur'],
					}],
				},
				activityApplyContentList: []
			};
		},
		props: {
			details: {
				type: Object,
				default: () => {}
			},
			templateList: {
				type: Array,
				default: () => []
			},
		},
		onReady() {
			console.log('???')
			this.$refs.uForm.setRules(this.rules);
		},
		async mounted() {

		},
		methods: {
			open() {
				this.show = true;
			},
			hide() {
				this.show = false
			},
			handNavLook() {

				this.show = false
			},
			async handSignEnter() {

				this.$refs.uForm.validate(async valid => {

					if (valid) {
						// 封装参会人信息
						this.activityApplyContentList = []
						for (let i = 0; i < this.templateList.length; i++) {
							if (
								this.templateList[i].keyName &&
								this.templateList[i].keyName.indexOf('姓名') != -1
							) {
								this.activityApplyContentList.push({
									templateId: this.templateList[i].templateId,
									activityId: this.details.activityId,
									contentText: this.form.name,
								})
							} else if (
								this.templateList[i].keyName &&
								this.templateList[i].keyName.indexOf('手机') != -1
							) {
								this.activityApplyContentList.push({
									templateId: this.templateList[i].templateId,
									activityId: this.details.activityId,
									contentText: this.form.phone,
								})
							}
						}
						let activityTicketList = []
						activityTicketList.push({
							activityId: this.details.activityId,
							persionName: this.form.name,
							persionPhone: this.form.phone
						})
						let newForm = {
							activityTicketList: activityTicketList,
							activityApplyContentList: this.activityApplyContentList,
							flag: 4
						}
						//系列化
						newForm = qs.stringify(newForm, {
							allowDots: true,
						})
						let res = await this.$u.api.activitySignUpPc(newForm)
						console.log(res, '支付参数')
						try {
							let pay = await subPay(res.paramMap)
							this.show = false
							this.$parent.init()
							uni.showToast({
								title: '报名成功'
							})
							for (let key in this.form) {
								this.form[key] = ''
							}
							activityTicketList = []
							this.activityApplyContentList = []
						} catch (e) {
							uni.showToast({
								title: '取消支付',
								icon: 'none'
							})

						}
					} else {
						console.log('验证失败');
					}
				});

			}
		}
	}
</script>

<style scoped lang="scss">
	.modal-box {
		// margin-top: 60rpx;
		padding: 60rpx;

		.sign-pic {
			font-size: 30rpx;
			color: $bs-text-color-333;
		}

		.look-title {
			font-size: $bs-font-size-24;
			color: $bs-text-color-999;
			text-align: center;
			width: 100%;
			margin-top: 20rpx;
			// color: $bs;
		}
	}
</style>
